<template>
	<view class="container">
		<view class="amount-list">
			<view class="amount-item" :class="{ active: selectedAmount === 0.05 }" @click="selectAmount(0.05)">
				5k
			</view>
			<view class="amount-item" :class="{ active: selectedAmount === 0.1 }" @click="selectAmount(0.1)">
				10k
			</view>
			<view class="amount-item" :class="{ active: selectedAmount === 0.5 }" @click="selectAmount(0.5)">
				50k
			</view>
		</view>
		<button class="recharge-button" @click="recharge">充值</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedAmount: 0.01,
				token: null,
			}
		},
		created() {
			this.recordToken();
		},
		methods: {
			recordToken() {
				this.token = localStorage.getItem('token');
				console.log(this.token);
			},

			selectAmount(amount) {
				this.selectedAmount = amount;
			},

			recharge() {
				const url = `http://localhost:8088/alipay/pay?money=${this.selectedAmount}`;
				uni.request({
					url: url,
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (response) => {
						if (response.data.code === 1) {
							console.log(response.data);
							window.location.href = response.data.data;  // 跳转到支付页面
							
						} else {
							uni.showToast({
								title: '充值失败: ' + response.data.msg,
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	.amount-list {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-bottom: 20px;
	}

	.amount-item {
		width: 90px;
		height: 90px;
		background-color: #f0f0f0;
		border-radius: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		font-weight: bold;
		color: #333;
		transition: background-color 0.3s;
	}

	.amount-item.active {
		background-color: #007aff;
		color: white;
	}

	.recharge-button {
		width: 80%;
		height: 50px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 25px;
		font-size: 18px;
	}
</style>